import { lazy, useRef, useEffect } from 'react'
import { HashRouter } from 'react-router-dom'
/* -------------------------------------------------------- Declare -- */
const { $, $lazy } = window
/* -------------------------------------------------------- Sync Component -- */
import Lang from '@antd/lang'
import AppRouter from '@/router'
/* -------------------------------------------------------- Async Component -- */
const Toast 	= lazy(()=>import('@tp/toast'))
const Loading 	= lazy(()=>import('@tp/data-loading'))
const Confirm 	= lazy(()=>import('@antd/confirm'))
const Message 	= lazy(()=>import('@antd/message'))
const Modal = $lazy.hook(()=>import('@antd/modal'))
const FormModal = $lazy.hook(()=>import('#cpt/temp/FormModal'))
const TableModal = $lazy.hook(()=>import('#cpt/temp/TableModal'))
const ImageModal = $lazy.hook(()=>import('#cpt/temp/ImageModal'))
/* -------------------------------------------------------- Page Component -- */
const App = ( ) => {
	const modalRef = useRef()
	const formModalRef = useRef()
	const tableModalRef = useRef()
	const imageModalRef = useRef()
	useEffect(()=>{
		window.$modalRef = () => $.ref(modalRef)
		window.$formModalRef = () => $.ref(formModalRef)
		window.$tableModalRef = () => $.ref(tableModalRef)
		window.$imageModalRef = () => $.ref(imageModalRef)
	}, [])
	useEffect(()=>{
		console.log(`主文件运行 1 次`)
	})
	return (
		<Lang>
			<HashRouter>
				<AppRouter/>
				<Modal ref={modalRef} />
				<FormModal ref={formModalRef} />
				<TableModal ref={tableModalRef} />
				<ImageModal ref={imageModalRef} />
			</HashRouter>
			<Toast />
			<Loading />
			<Confirm />
			<Message />
		</Lang>
	)
}

export default App
